<template>
	<view class="my-course-cont" v-if="pageData">
		<!-- 课程信息组件 -->
		<course-info :course="pageData"></course-info>
		<!-- 选择日期组件 -->
		<selection-time :disabled="true" :timeObj="timeObj" :choosedate="pageData.c_hour"></selection-time>
		<!-- 门店组件 -->
		<select-stores title="上课门店" :stores="stores"></select-stores>
		<!-- 底部按钮 -->
		<view class="bottom-btn">
			<view class="bottom-btn-cont flex vertical-center align-between">
				<view class="ml-30 flex">
					<!-- 实际价格 -->
					<view class="real-price flex fn-w" icon="$" unit="元">
						{{pageData.price}}
					</view>
					<!-- 划线价格 -->
					<!-- <view class="original-price flex fn-w ml-30" unit="价格$">
						1000
					</view> -->
				</view>
				<!-- 购买按钮 -->
				<view @click="onBuyCourse(id)" class="mr-30 right-btn flex vertical-center align-center">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toast
	} from '@/utils/util.js';
	import vButton from '@/components/button/button.vue';
	import courseInfo from '@/components/course-info/course-info.vue';
	import selectionTime from "@/components/selection-time/selection-time.vue";
	import selectStores from '@/components/select-stores/select-stores.vue';
	import CourseApi from '@/api/course.js';

	export default {
		components: {
			vButton,
			courseInfo,
			selectionTime,
			selectStores
		},
		data() {
			return {
				pageData: null,
				timeObj: null,
				id: "",
				stores: []
			};
		},
		computed: {

		},
		onLoad(e) {
			this.id = e.id;
			this.getAllCourseDetail(e.id)
		},
		methods: {
			async getAllCourseDetail(id) {
				const res = await CourseApi.GetAllCourseDetail({id})
				console.log(res)
				uni.setNavigationBarTitle({
					title: res.c_name
				})
				this.pageData = res;
				this.stores = [{
					name: res.s_name,
					address: res.s_address
				}]
				this.timeObj = {
					startTime: res.c_start.split(":").slice(0, 2).join(':'),
					endTime: res.c_end.split(":").slice(0, 2).join(':'),
					room: res.c_room || "暂无教室"
				}
			},
			// 监听组件返回的数据
			onTimeChange(data) {
				console.log(data)
			},
			onBuyCourse(id) {
				let url = `/pages/course/payment/payment?id=${id}`;
				this.onGoNext(url);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.my-course-cont {
		padding: 26rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
	}

	.bottom-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100vw;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: $color-primary;
		box-shadow: 0px -2px 5px rgba(117, 117, 117, 0.1);
		z-index: 101;

		.bottom-btn-cont {
			height: 118rpx;
		}

		.real-price {
			margin-top: 10rpx;
			height: 40rpx;
			align-items: flex-end;
			font-size: 39rpx;

			&::before {
				content: "￥";
				font-size: 25rpx;
				margin-bottom: 8rpx;
			}

			&::after {
				content: "元";
				font-size: 25rpx;
				margin-bottom: 8rpx;
			}
		}

		.original-price {
			font-size: 30rpx;
			height: 34rpx;
			align-items: flex-end;
			margin-top: 12rpx;
			text-decoration: line-through;

			&::before {
				content: "价格￥";
				font-size: 22rpx;
				margin-bottom: 5rpx;
			}
		}

		.right-btn {
			width: 266rpx;
			height: 64rpx;
			font-size: 26rpx;
			color: #2C0101;
			border-radius: 64rpx;
			background-color: $color-white;

			&:active {
				transform: translate(1px, 1px);
			}
		}
	}
</style>
